<template>
  <div class="medical-order-wrapper">
    <div class="order-item common-panel">
      <div class="order-left">
        <div class="top-con">
          <div class="title"> {{info.name}}</div>
          <div class="desc">
            {{info.abstract}}
          </div>
        </div>
        <div class="bottom-con">
          <div class="price-wrapper">
            <span class="price"><em>￥</em>{{info.price}}</span>
            <span class="line-price">￥{{info.lineation}}</span>
          </div>
        </div>
      </div>
      <div class="order-right" v-if="info.picurl">
        <van-image
          width="100"
          height="100"
          :src="info.picurl[0]"
        />
      </div>
    </div>
    <div class="tabs-wrapper">
      <van-tabs type="card" v-model="active" @change="handleChangeTab" color="linear-gradient(0deg, #FF534F 0%, #FF9C78 100%);" background="#EEEEEE">
        <van-tab title="个人体检" name="1"></van-tab>
        <van-tab title="单位体检" name="2"></van-tab>
      </van-tabs>
    </div>

    <van-cell-group class="panel-cell">
      <van-field v-if="active == 2" v-model="form.unit_name" :left-icon="`${staticPath}/icon_muying@2x.png`" label="预约单位" placeholder="请输入单位名" />
      <van-cell title="请选择预约人" :value="selectMember" :icon="`${staticPath}/icon_muying@2x.png`" is-link @click="handleShowPopup('member')"/>
      <van-cell title="请选择服务时间" :value="form.user_time" :icon="`${staticPath}/icon_yuyuejilv@2x.png`" is-link @click="timeShow = true"/>
      <van-field v-if="active == 2" v-model="form.account_people" type="number" :left-icon="`${staticPath}/icon_yuyuejilv@2x.png`" label="预约人数" placeholder="请输入预约人数" />
    </van-cell-group>

    <div class="common-panel">
      <div class="huli-common-title">
        <h3><em></em>留言</h3>
      </div>

      <van-field
        v-model="info.log_info"
        rows="5"
        autosize
        label=""
        type="textarea"
        maxlength="140"
        placeholder="请描述您的疑问或症状，疾病或身体情况。"
        show-word-limit
        class="textarea"
      />
    </div>

    <van-popup position="bottom" :style="{ height: '100%' }"
      closeable
      close-icon="close"
      v-model="timeShow">
        <div class="time-select">
          <h3 class="title">服务时间</h3>
          <p class="time-desc">请选择您的预约时间，预约时间最早可选支付完成后4小时，您可选择（含今天）五天内的预约时间。</p>
          <time-picker
            :dateTimeTable="dateTable"
            :timeInterval="0.5"
            :selectedItemColor="'#4ECE40'"
            :selectedTabColor="'#fff'"
            :disableText="'暂不可预约'"
            :advanceTime="0"
            :timeSlot="0.5"
            @selectTime="handleSelectTime"
            @selectDateEvent="handleSelectDate"
          ></time-picker>
          <div class="btn-wrapper">
            <van-button color="#4ECE40" block @click="handleConfirm">确认</van-button>
          </div>
        </div>
      </van-popup>

    <van-popup position="bottom" :style="{ height: '50%' }"
      v-model="popupShow">
        <van-picker
          title="标题"
          show-toolbar
          value-key="name"
          :columns="jiuzhenArr"
          @confirm="onConfirm"
          @cancel="popupShow = false"
        />
      </van-popup>

    <div class="common-panel agreement">
      <van-checkbox v-model="checked" shape="square">本人或接受上门服务的人已充分知《用户协议》，同意遵守合同并接受上门服务。</van-checkbox>
    </div>

    <van-goods-action>
      <van-goods-action-icon :icon="`${staticPath}/icon_kefu@2x.png`" text="客服" @click="onClickIcon" />
      <van-goods-action-button
        :color="'linear-gradient(0deg, #FF534F 0%, #FF9C78 100%)'"
        text="提交订单"
        
        @click="onClickButton"
      />
    </van-goods-action>

    
  </div>
</template>

<script>
import { checksInfoServer,memberList,checkLogsServer } from '@/service/server';
import { checkServiceTime } from '@/service/order';
import TimePicker from "@/components/time-picker/index";
import dayjs from 'dayjs';
import { GetQueryString } from '@/utils';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      startTime: '08:00',
      endTime: '22:30',
      dateTable: [],
      actTime:"",
      actType: '',
      timeShow: false,
      selectMember:'',
      popupShow: false,
      staticPath: process.env.VUE_APP_STATIC_PATH,
      message:'',
      checked:false,
      active: '1',
      info: {},
      jiuzhenArr: [],
      form:{
        type: 1,
        check_id:'',
        check_name:'',
        unit_name:'',
        user_people:'',
        user_id:'',
        account_people:'',
        user_time: '',
        log_info:''
      }
    };
  },

  created(){
    this.queryInfo(this.$route.query.check_id)
    this.queryAddress()
    this.queryServiceTime(this.$route.query.check_id)
    this.selectMember = this.memberInfo.name
    this.form.user_people = this.memberInfo.name
    this.form.user_id = this.memberInfo.id
  },

  components: {
    TimePicker
  },

  computed: {
    ...mapGetters(['memberInfo'])
  },

  methods: {
    onClickIcon(){},
    async queryServiceTime(id){
      let result = await checkServiceTime(id);
      if(result.status == 200){
        let dateTable = result.data;
        dateTable.map(item => {
          item.timeStamp = dayjs(item.date).valueOf()
        })
        this.dateTable = dateTable
        console.log(this.dateTable,'parent data')
      }
    },
    async onClickButton(){
      let params = Object.assign({}, this.form);
      if(this.active == 1){
        delete params.unit_name
      }
      params.check_id = this.$route.query.check_id;
      if(!this.checked) return this.$toast('请勾选已阅读用户协议')
      let result = await checkLogsServer(params);
      if(result.status == 200){
        this.$toast('预约成功')
        this.$store.commit('user/SET_HULI_ADDRESS',{})
        this.$store.commit('user/SET_MEMBER_INFO',{})
        setTimeout(()=>{
          this.$router.push({
            path: '/user/medical/order/success'
          })
        },1000)
      }else{
        this.$toast(result.message)
      }
    },
    handleChangeTab(e){
      this.active = this.form.type = e
    },
    handleShowPopup(type){
      this.actType = type
      let redirect = encodeURIComponent('/user/medical/order/index?check_id=' + GetQueryString('check_id') + '&check_name=' + GetQueryString('check_name'))
      // this.popupShow = true
      if(!this.jiuzhenArr.length){
        this.$dialog.confirm({
          title: '提示',
          message: '暂无就诊者，去添加'
        }).then(() => {
          this.$router.push({
            path: '/user/office/index?type=addNew&redirect=' + redirect
          })
        })
        .catch(() => {
          this.$toast('已取消')
        });
      }else{
        this.$router.push({
          path: '/user/office/index?type=select&redirect=' + redirect
        })
      }
    },
    handleConfirm(){
      this.timeShow = false
      this.form.user_time = this.actTime
    },
    onConfirm(e){
      console.log(e,'confirm')
      this.form.user_people = e.name
      this.form.user_id = e.id
      this.selectMember = e.name
      this.popupShow = false
    },
    async queryAddress(){
      let result = await memberList();
      if(result.status == 200){
        // this.jiuzhenArr = result.data.model
        if(result.data.model.length > 0){
          this.jiuzhenArr = result.data.model
        } 
      }else{
        this.$toast(result.message)
      }
    },
    async queryInfo(id){
      let result = await checksInfoServer(id);
      if(result.status == 200){
        this.info = result.data
      }
    },
    handleSelectTime(index,item){
      console.log(index, item, 'parent select')
      if(item[1] !== undefined){
        this.actTime = dayjs(item[1]).format("YYYY-MM-DD HH:mm")
      }else{
        this.actTime = ''
        // this.$toast('暂无可选时间')
      }
    },
    handleSelectDate(index,item){
      console.log(index,item,'handleSelect')
    },
  },
};
</script>
<style lang='less'>

.medical-order-wrapper{
  background: #f5f5f5;
  padding-bottom: 60px;
  .agreement{
    .van-checkbox__label{
      color: #999;
    }
  }
  .tabs-wrapper{
    background: #fff;
    padding: 12px 0;
    margin: 10px 0;
    .van-tabs__nav--card .van-tab.van-tab--active{
      background: linear-gradient(0deg, #FF534F 0%, #FF9C78 100%);
      color: #fff;
    }
  }
  .van-tabs__nav--card{
    border-radius: 8px;
    height: 40px;
    border: none!important;
  }
  .van-tabs--card>.van-tabs__wrap{
    height: 40px;
    .van-tab{
      &:first-child{
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      &:last-child{
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  .textarea{
    background: transparent;
    border: 1px solid #f5f5f5;
  }
  .order-item{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .order-left{
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      height: 102px;
      .bottom-con{
        .price-wrapper{
          .price{
            color: #ff0000;
            font-size: 16px;
          }
          .line-price{
            color: #999;
            font-size: 13px;
            margin-left: 10px;
          }
        }
      }
      .top-con{
        height: 80%;
        flex: 1;
        .title{
          font-size: 16px;
          color: #000;
          margin-bottom: 10px;
        }
        .desc{
          color: #999;
          font-size: 13px;
          line-height: 1.5;
          .ellipsisLine(3)
        }
      }
    }
  }
  .common-panel {
    margin-top: 10px;
    background: #fff;
    padding: 15px;
  }
  .panel-cell{
    .van-cell{
      background: #fff;
    }
  }
  .huli-common-title {
    margin-bottom: 15px;
    .right-arrow {
      display: flex;
      justify-content: flex-end;
      color: #999;
      font-size: 13px;
      flex: 1;
    }
    h3 {
      font-size: 16px;
      margin-bottom: 15px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      em {
        display: inline-block;
        width: 5px;
        height: 17px;
        background: linear-gradient(0deg, #fcc9cb, #f7757b);
        border-radius: 5px;
        margin-right: 6px;
      }
    }
  }
}
</style>